<script setup>
import { ref, onMounted } from 'vue'
import { graphic } from 'echarts/core'
import VChart from '@/components/v-chart/v-chart.vue'

const option = ref({})

const getData = () => {
  // 使用固定模拟数据
  const data = {
    category: ['深圳市', '北京市', '上海市', '广州市', '杭州市', '成都市', '南京市', '武汉市', '西安市', '重庆市', '苏州市', '天津市', '郑州市', '长沙市', '东莞市', '青岛市', '沈阳市', '宁波市', '昆明市', '福州市', '无锡市', '厦门市', '济南市', '大连市', '哈尔滨市', '温州市', '南昌市', '长春市', '石家庄市', '合肥市'],
    barData: [67, 89, 45, 72, 91, 38, 65, 54, 78, 43, 82, 56, 69, 47, 93, 61, 74, 52, 88, 41, 76, 59, 63, 48, 85, 39, 71, 58, 64, 50],
    lineData: [89, 112, 67, 95, 118, 56, 87, 73, 101, 61, 106, 78, 92, 69, 121, 84, 98, 75, 115, 64, 99, 81, 86, 70, 110, 58, 94, 79, 88, 72],
    rateData: [75, 79, 67, 76, 77, 68, 75, 74, 77, 70, 77, 72, 75, 68, 77, 73, 76, 69, 77, 64, 77, 73, 73, 69, 77, 67, 76, 73, 73, 69]
  }
  setOption(data)
}

const setOption = async (newData) => {
  option.value = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0,0,0,.6)',
      borderColor: 'rgba(147, 235, 248, .8)',
      textStyle: {
        color: '#FFF'
      },
      confine: true
    },
    legend: {
      data: ['已安装', '计划安装', '安装率'],
      textStyle: {
        color: '#B4B4B4'
      },
      top: '0'
    },
    grid: {
      left: '50px',
      right: '40px',
      bottom: '30px',
      top: '20px'
    },
    xAxis: {
      data: newData.category,
      axisLine: {
        lineStyle: {
          color: '#B4B4B4'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: [
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: '#B4B4B4'
          }
        },
        axisLabel: {
          formatter: '{value}'
        }
      },
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: '#B4B4B4'
          }
        },
        axisLabel: {
          formatter: '{value}% '
        }
      }
    ],
    series: [
      {
        name: '已安装',
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          borderRadius: 5,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#956FD4' },
            { offset: 1, color: '#3EACE5' }
          ])
        },
        tooltip: {
          valueFormatter: (value) => value + '个'
        },
        data: newData.barData
      },
      {
        name: '计划安装',
        type: 'bar',
        barGap: '-100%',
        barWidth: 10,
        itemStyle: {
          borderRadius: 5,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(156,107,211,0.8)' },
            { offset: 0.2, color: 'rgba(156,107,211,0.5)' },
            { offset: 1, color: 'rgba(156,107,211,0.2)' }
          ])
        },
        tooltip: {
          valueFormatter: (value) => value + '个'
        },
        z: -12,
        data: newData.lineData
      },
      {
        name: '安装率',
        type: 'line',
        smooth: true,
        showAllSymbol: true,
        symbol: 'emptyCircle',
        symbolSize: 8,
        yAxisIndex: 1,
        itemStyle: {
          color: '#F02FC2'
        },
        tooltip: {
          valueFormatter: (value) => value + '%'
        },
        data: newData.rateData
      }
    ]
  }
}

onMounted(() => {
  getData()
})
</script>

<template>
  <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
</template>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 100%;
}
</style>
